<!-- 车辆详情 -->
<template>
  <div
    class="dashboard-container vehicle-detail info"
  >
    <el-tabs
      v-model="activeName"
      class="car_details"
    >
      <!-- 基本信息 -->
      <el-tab-pane
        label="基本信息"
        name="first"
        class="formLabel"
      >
        <VehicleInfo></VehicleInfo>
      </el-tab-pane>

      <!-- 行驶证信息 -->
      <el-tab-pane
        label="行驶证信息"
        name="second"
      >
        <VehicleDriverLicense></VehicleDriverLicense>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>
<script>
import VehicleInfo from '@/views/transit/components/vehicle-info.vue'
import VehicleDriverLicense from '@/views/transit/components/vehicle-driving-license.vue'

export default {
  components: {
    VehicleInfo,
    VehicleDriverLicense
  },

  data() {
    return {
      activeName: 'first'

    }
  },

  methods: {

  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
.car_details{
  margin-top: 20px;
  // border-radius: 15px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  margin-left: 30px;
  padding: 30px;
  width: 96%;
  height: 600px;
  background-color: #fff;
}
.edit-box{
  margin-left: 45%;
  .btn{
  width: 100px;
  color: #fff;
  background-color: #E15536;
  margin-top: 30px;
  }
  .btn-top{
     width: 100px;
     color: #fff;
     background-color: #E15536;
     margin-top: 93px;
  }
}
.demo-ruleForm .el-input{
border:none !important;
margin-right: 90px;
font-family: sans-serif;
}
.image-form{
  margin: 0 25px;
}
.top-form{
margin-top: 30px;
}

</style>

<style lang="scss" scoped>
.info{
  margin: 0 10px;
}
.vehicle-detail {
  /deep/ .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
